<?php if (!defined('THINK_PATH')) exit(); /*a:3:{s:72:"/www/wwwroot/tp.luyir.cn/public/../application/index/view/demo/edit.html";i:1593439498;s:74:"/www/wwwroot/tp.luyir.cn/application/index/view/common/element-header.html";i:1593012776;s:74:"/www/wwwroot/tp.luyir.cn/application/index/view/common/element-footer.html";i:1592660069;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?php echo !empty($title)?$title : 'element模板'; ?></title>
    <link rel="stylesheet" href="/unpkg/element-ui@2.12.0/lib/theme-chalk/index.css">
    <script src="/unpkg/jquery@3.3.1/dist/jquery.js"></script>
    <script src="/unpkg/vue@2.6.10/dist/vue.js"></script>
    <script src="/unpkg/element-ui@2.12.0/lib/index.js"></script>
    <script src="/unpkg/axios@0.18.0/dist/axios.js"></script>
    <script src="/unpkg/qs@6.5.2/dist/qs.js"></script>
    <script src="/unpkg/untils.js"></script>
    <style>
        #app {
            width: 1440px;
            margin: 0 auto;
        }
    </style>
</head>
<body>






<div id="app">

    <el-card class="box-card">
        <el-form :model="tableForm" status-icon :rules="rules" ref="tableForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="openid" prop="openid">
                <el-input v-model="tableForm.openid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="tableForm.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="国家" prop="country">
                <el-input v-model="tableForm.country"></el-input>
            </el-form-item>
            <el-form-item label="省份" prop="province">
                <el-input v-model.number="tableForm.province"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model.number="tableForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="unionid" prop="unionid">
                <el-input v-model.number="tableForm.unionid"></el-input>
            </el-form-item>
            <!--动态新增 -->
            <!--
                1.vue中是操作数据的,所以没有传统意义上的demo节点的
                2.多个相同节点其实就是循环数组出来的
                3.增加多个相同节点的本质其实是增加数组(对象)中的元素
                4.后台处理编辑的时候,如果为控制则要将后台数据的结构留出来
            -->

            <el-form-item v-for="( item, index ) in tableForm.ipss"
                          :label="'新增域名'+index"
                          :prop="'ipss.' +index + '.value'"
                          :key="item.key"
            >
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-input v-model="item.username" placeholder="请输入ip名称"></el-input>
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="item.length" placeholder="请输入ip长度"></el-input>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-purple">
                            <el-button @click="add">新增</el-button>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-purple">
                            <el-button @click.prevent="removeDomain(item)">删除</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit('tableForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </el-card>


</div>
<script>


    new Vue({
        el:      '#app',
        data () {
            return {
                tableForm: {
                    openid:   '',
                    nickname: "",
                    country:  '',
                    province: '',
                    mobile:   '',
                    unionid:  '',
                    ipss:     [
                        {
                            username: '',
                            length:   ''
                        },
                    ]

                },

                rules: {
                    nickname: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                    ],
                    country:  [
                        {required: true, message: '请输入国家', trigger: 'blur'},
                    ],
                    province: [
                        {required: true, message: '请输入省份', trigger: 'blur'},
                    ],
                    mobile:   [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: '手机号格式不正确', trigger: "blur"}
                    ],
                },
            }
        },
        methods: {
            getMember (id) {
                this.$request.get({
                    url:  'index/demo/edit',
                    data: {id}
                }).then((res) => {
                    if (res.code != 1) {
                        this.$message.error(res.msg);
                        return
                    }
                    this.tableForm = res.data;
                })
            },
            //提交
            submit (forms) {
                this.$refs[forms].validate((valid) => {
                    if (valid) {
                        this.$request.post({
                            url:  '/index/demo/edit',
                            data: this.tableForm
                        }).then((res) => {
                            if (res.code == 1) {
                                window.location.href = '/index/demo/index';
                                return
                            }
                            this.$message.error(res.msg);
                        })
                    }
                })
            },

            //移除
            removeDomain (e) {
                var index = this.tableForm.ipss.indexOf(e);
                if (index !== -1) {
                    this.tableForm.ipss.splice(index, 1);
                }
            },
            //增加节点
            add () {
                this.tableForm.ipss.push({
                    username: "",
                    length:   ''
                })
            }


        },
        mounted () {
            let id = getQuery('id');
            if (id) {
                this.getMember(id);
            }
        }
    })

</script>

</body>
</html>

